<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<%@ page import="com.ai.core.util.Configure"%>
<%@ page import="com.ai.wx.util.WeixinUtil"%>
<%@ page import="com.ai.wx.entity.AgentUser"%>
<%@ page import="com.ai.core.constant.GlobalConstant"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>折扣码设置</title> 
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

<script type="text/javascript" src="${ctx}/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/js/common.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<link href="${ctx}/css/box.css" rel="stylesheet" type="text/css" />
  
<style>
@media (min-width:414px) {
.sale-set {
    margin-top: 20px
}
.sale-set > div > div {
    font-size: 18px;
    line-height: 50px
}
.sale-set a {
      margin-top: 10px;
    margin-bottom: 15px;
}
.sale-des > p{
    margin:20px 0px;
    font-size:18px;
    line-height:2em
}
.sale-des > table{
    line-height:2em;
    font-size:12px;
}
.sale-des > table td{
    padding:2px;
}
.set-button{
    line-height:40px;
    margin-top:40px;
    height:40px;
    font-size:18px;
    margin-bottom:10px;
}
}
@media (max-width:413px) {
.sale-set {
    margin-top: 10px;
}
.sale-set > div > div {
    font-size: 16px;
    line-height: 35px
}
.sale-set a { 
    margin-bottom: 10px;
      margin-top: 10px;
}
.sale-des > p{
    margin:15px 0px;
    font-size:14px;
    line-height:1em
}
.sale-des > table{
    line-height:2em;
    font-size:11px;
    }
.sale-des > table td{
    padding:1px;
}
.set-button{
    line-height:30px;
    margin-top:20px;
    height:30px;
    font-size:14px;
    margin-bottom: 20px;
}
}
html {
    background-color: #f8f8f8;
}
a{
    text-decoration:none;
}
.wrap {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
}
.sale-set {
    width: 90%;
    height: 100%;
    margin: auto;
}
.sale-set > div {
    width: 100%;
    height: auto;
}
.sale-set > div > div {
    float: left;
    margin-right: 2%;
    color: #333;
}
.sale-set > div > div p{
      font-size: 50px;
      text-align:center;
      color:#fd6138;
}
 
.sale-set > div > div:nth-child(1) {
    width: 100%;
}
.sale-set > div > div:nth-child(2) {
    width: 100%;
    text-align: center;
}
.sale-set a {
    width:30%;
    border: #999 1px solid;
    border-radius: 3px; 
    display: inline-block;
    text-decoration: none;
    color: #999;
    text-align:center;
}
.sale-set a:visited {
    border: #fd6138 1px solid;
    color: #fd6138;
    background-color: #096
}
.sale-set a:hover {
    border: #fd6138 1px solid;
    color: #fd6138;
}
.sale-set a:active {
    border: #fd6138 1px solid;
    color: #fd6138;
}
.sale-set-btn-clicked {
    border: #fd6138 1px solid;
    color: #fd6138;
}
.sale-des{
    width:90%;
    height:auto;
    margin:auto;
    color:#666;
    padding-top: 10px;
        clear:both;
}
.sale-des > p{
    width:100%;
    border-top:#ccc 1px dashed;
    text-align:center;
    line-height:3em
}
.sale-des > table{
    border:#ccc 1px solid;
    width:100%;
    background-color:#fff
    }
.sale-des > table td{
    border:#ccc 1px solid;
    text-align:center;
}
.set-button{
    width:100%;
    color:#fff;
    text-align:center;
    background-color:#ffb412;
    border-radius:5px;
    display:block;
    text-decoration:none;
    display:block
}
.set-button:active{
    color:#fff;
    text-decoration:none;
    background-color:#e29e0c;
}
.set-button:visited{
    color:#fff;
    text-decoration:none;
}
.set-button:hover{
    color:#fff;
    text-decoration:none;
}
.sale-des > p > span{
    font-size:12px;
    display:inline-block;
    border:#ccc 1px solid;
    border-radius:3px;
    padding:0px 10px;
    line-height:20px;
    position:relative;
    right:-20px
}
.sale-des > p > span:active{
    background-color:#f0f0f0
}
 
</style>
<script type="text/javascript">
wx.config({
    debug: false,
    appId: '<%=Configure.getAppId()%>',
    timestamp: '${JsSign.timestamp}',
    nonceStr: '${JsSign.nonce}',
    signature: '${JsSign.signature}',
    jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
        'hideMenuItems',
        'showMenuItems',
        'hideAllNonBaseMenuItem',
        'showAllNonBaseMenuItem',  
        'chooseImage',
        'previewImage',
        'uploadImage',
        'downloadImage',
        'getNetworkType', 
        'hideOptionMenu',
        'showOptionMenu',
        'closeWindow',   
      ]
});
var promotionRate = 0;
wx.ready(function () {
     $('.sale-set a').click(function(){
    	 $('.sale-set a').removeClass('sale-set-btn-clicked');
    	 promotionRate=$(this).data('rate');  
    	 $(this).addClass('sale-set-btn-clicked'); 
     });

     
     $('#setPromCodeBtn').click(function(){
         if(promotionRate == 0){
        	 alert("请先设置佣金模式");
        	 return;
         }else{
        	 if(confirm("您确认你选择的佣金模式？")){
        		 $.ajax({ 
                     url: '${ctx}/agent/doPromotionCodeSetting',
                     type: 'POST',
                     data: {promotionRate:promotionRate},
                     cache:false,
                     dataType:'json',  
                     success: function(data){  
                         if(data.success){
                             alert('设置成功，您可以点击最下面的按钮进行分享');
                             window.location.href='${ctx}/agent/promotionCodeSetting'; 
                         }else{
                             alert('设置成功，错误原因：'+data.msg);
                         }
                     },
                     error : function(data) {    
                         console.info(data);
                     }    
                 });
        	 }
         }
        
     });
});

wx.error(function (res) {
  alert(res.errMsg);
});

function closeTab(){
    var saleTable = document.getElementById('saleTable');
    var closeTab = document.getElementById('closeTab');
    if(saleTable.style.display=="none"){
        saleTable.style.display="block";
        closeTab.innerHTML = "收起";
    }else{
        saleTable.style.display="none";
        closeTab.innerHTML = "展开";
    }
    
}
</script>
</head>

<body>
<div class="wrap">
  <div class="sale-set not-set">
    <div>
      <div>优惠码</div>
      <div><p>${promotion.promotionCode}</p></div>
    </div>
    <c:if test="${promotion.promotionRate != null }">
	    <div>
	      <div>佣金模式</div>
	      <div><p>
	      <c:if test="${promotion.promotionRate == 1 }">高折扣</c:if>
          <c:if test="${promotion.promotionRate == 2 }">平衡</c:if>
          <c:if test="${promotion.promotionRate == 3 }">高佣金</c:if>
	      </p></div>
	    </div>
    </c:if>
    <c:if test="${promotion.promotionRate ==null }">
	    <div>
	      <div>佣金模式</div>
	      <div> 
	      
	      <a data-rate="1">高折扣</a> 
	      <a data-rate="2">平衡</a>  
	      <a data-rate="3">高佣金</a> </div> 
	    </div>
    </c:if>
  </div>
  <div class="sale-des">
  <p>优惠码简介 <span onClick="closeTab()" id="closeTab">收起</span></p>
    <table id="saleTable">
      <tr>
        <td rowspan="2"><p>产品名称</p></td>
        <td colspan="2"><p>高折扣</p></td>
        <td colspan="2"><p>平衡</p></td>
        <td colspan="2"><p>高佣金</p></td>
      </tr>
      <tr>
        <td><p>折扣(元)</p></td>
        <td><p>佣金(元)</p></td>
        <td><p>折扣(元)</p></td>
        <td><p>佣金(元)</p></td>
        <td><p>折扣(元)</p></td>
        <td><p>佣金(元)</p></td>
      </tr>
      <c:forEach items="${promoList}" var="promo">
	      <tr>
		        <td><p>${promo.productName}</p></td>
		        <td><p>${promo.higDiscount}</p></td>
		        <td><p>${promo.higBrokerage}</p></td>
		        <td><p>${promo.midDiscount}</p></td>
		        <td><p>${promo.midBrokerage}</p></td>
		        <td><p>${promo.lowDiscount}</p></td>
		        <td><p>${promo.lowBrokerage}</p></td>        
	      </tr>
      </c:forEach>
    
    </table>
    <c:if test="${promotion.promotionRate == null }">
        <a id="setPromCodeBtn" class="set-button">确定</a>
    </c:if>
    <c:if test="${promotion.promotionRate != null }">
        <a class="set-button">分享</a>
    </c:if>
  </div>
</div>
</body>
</html>





